<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        form {
            width: 200px;
            height: 400px;

            background-color: aquamarine;
            margin: 0 auto;
            padding-left: 10px;
        }

        input {
            outline: none;
        }
    </style>
    <script src="./layui/layui.js"></script>
</head>

<body>
    <form class="layui-form" action="">
        <h2>注册页面</h2>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入手机号" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码框</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                    autocomplete="off" class="layui-input">
            </div>
        </div>
        <br>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" type="button">立即注册</button>
            </div>
        </div>
    </form>
</body>
<script>
    // 事件
    document.querySelector(".layui-btn").onclick = function () {
        //    获取输入手机号框里的元素
        let mobile = document.querySelector("input[name='title']").value;
        // 获取密码框里的内容
        let password = document.querySelector("input[name='password']").value;
        //第一步
        let xhr = new XMLHttpRequest;
        // 第二步 建立连接
        xhr.open("post", "http://phpclub.org.cn/edu/server/regist.php?") //接口
        // 第三步，创建请求头
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
        // 第四步，send发送链接
        xhr.send(`mobile=${mobile}&password=${password}`);
        xhr.onload = function () {
            //  JSON.stringify() 将js中内置的数据类型(数组、对象)转换为JSON格式的字符串
            // JSON.parse() 将JSON格式的字符串转换为内置的数据类型
            let response = JSON.parse(xhr.responseText) //responce  客户端的返回值
            console.log(xhr.responseText);
            console.log(response);
            if (response.code != 100) {
                // alert("不能为空")
                // layer.msg是layui内置功能
                layer.msg(response.msg, {
                    icon: 5
                });
            }else{
                location.href = "login_pro.html"
            }
            
        }

    }
</script>

</html>